<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="./js/vue.js"></script>
<body>
    <div class="box">
        <input type="text" v-model="msg">
        <!-- 文本域一样 -->
        <textarea name="" id="" cols="30" rows="10" v-model="msg"></textarea>
        <!-- 单个多选框 初始值设置为布尔值-->
        <input type="checkbox" v-model="check">
        <!-- 多个多选框 初始值设置为数组 -->
        <input type="checkbox" value="足球" id="zuqiu" v-model="checkArr">
        <label for="zuqiu">足球</label>
        <!-- <h1>{{checkArr}}</h1> -->
        <input type="checkbox" value="吃" id="chi" v-model="checkArr">
        <label for="chi">吃</label>
        <h1>{{checkArr}}</h1>
        <!-- 单选框 初始值为空字符串 -->
        <input type="radio" name="" id="nan" value="男" v-model="readioValue">
        <label for="nan"></label>
        <h1>{{readioValue}}</h1>

        <!-- 下拉列表 -->
        <select name="" id="" multiple v-model="selectArr">  <!-- 在select里加上multiple使下拉列表多选-->
            <option value="" disabled>请选择</option> <!--disabled 表单默认元素-->
            <option value="注册">111</option>
            <option value="22">222</option>
            <option value="33">333</option>
        </select>
        <h1>{{selectArr}}</h1>
    </div>
    <script>
        const vm = new Vue({
            el:'.box',
            data:{
                msg:'input框type为text 有值写 没值就是空字符串',
                check:false,
                checkArr:[],
                readioValue:'',
                selectValue:'',
                selectArr:[],
            
            }
        })
    </script>
</body>
</html>